<!-- src/components/Card/Card.vue -->
<template>
  <div class="card">
    <h3 class="card__title">{{ title }}</h3>
    <div class="card__body">{{ body }}</div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '这是标题1'
  },
  body: {
    type: String,
    default: '这是内容1'
  }
});
</script>

<style scoped>
.card {
  border: 1px solid #eaecef;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;
}

.card__body {
  font-size: 1rem;
  line-height: 1.5;
  color: #34495e;
}
</style>